<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson20-线的动画</title>

    <link href="../../lib/mapbox-gl.css" rel="stylesheet">
    <script src="../../lib/mapbox-gl.js"></script>
    <script src="../../lib/turf.min.js"></script>
    <script src="../../lib/moment.min.js"></script>

    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }

        .mapboxgl-popup-content {
            background-color: transparent !important;
            border-radius: unset !important;
            box-shadow: unset !important;
            padding: unset!important;
            pointer-events: auto;
        }

        .mapboxgl-popup-close-button, .mapboxgl-popup-tip {
            display: none;
        }

        .self_point_container {
            position: relative;
            padding-top: 10px;
            background-color: #fff;
        }

        .self_point_container .close {
            position: absolute;
            right: 5px;
            top: 2px;
        }

        .container {
            position: relative;
            width: 50px;
            height: 50px;
            animation: scaleAni .5s infinite ease-in-out;

        }
        @keyframes scaleAni {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }

        .ripple {
            position: absolute;
            top: 0;
            left: 0;
            --size: 100%;
            width: var(--size);
            height: var(--size);
            /*width: 100px;*/
            /*height: 100px;*/
            border-radius: 50%;
            background: rgba(220, 4, 4, 0.6); /* 增强透明度 */
            animation: ripple .9s infinite linear;
            pointer-events: none;
        }

        .ripple:nth-child(2) {
            animation-delay: 0.2s;
        }

        .ripple:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.9;
            }
            50% {
                transform: scale(1.4); /* 更大缩放 */
                opacity: 0.2;
            }
            100% {
                transform: scale(1);
                opacity: 0.9;
            }
        }

    </style>
</head>
<body>

<div id="map"></div>

</body>

<script src="./main.js"></script>
<script src="./layers/BaseLayer.js"></script>

<!--lesson 18 台风代码-->
<!--<script src="./layers/service/typhoon/typhoon_eye_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_line_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_polygon_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_point_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_warningLine_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_warning_text_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_yu_line_layer.js"></script>-->
<!--<script src="./layers/service/typhoon/typhoon_yu_point_layer.js"></script>-->

<!-- lesson 19 点位水波纹定位-->
<!--<script src="./layers/service/test_pointer.js"></script>-->

<!--<script src="./layers/aniLineLayer.js"></script>-->

<script src="./layers/service/test_line.js"></script>


</html>
